<template>
  <div class="float_window">
    <!-- <div class="float_window"> -->
    <ul>
      <li @click="details">详细信息</li>
      <li @click="copyTitle">复制标题</li>
      <li @click="chooes">选择</li>
      <li @click="edits">编辑</li>
      <li @click="deletes">删除</li>
    </ul>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  name: "FloatWindow",
  data() {
    return {};
  },
  methods: {
    setWindow(v, data) {
      this.$el.style.left = v.x + this.$el.offsetWidth / 2 + "px";
      this.$el.style.top = v.y + this.$el.offsetHeight / 2 + "px";
      // console.log(v,data);
      this.TodoData = data;
    },
    details() {
      //获取点击的li的key，然后去APP查找到详细信息并发回送来,并让style的display为none
      this.$bus.$emit("showData");
      this.$bus.$emit("hideWindow");
    },
    copyTitle() {
      this.$copyText(this.TodoData.title);
      this.$bus.$emit("hideWindow");
    },
    chooes(){
      this.$bus.$emit("check", this.TodoData.id);
      this.$bus.$emit("hideWindow");
    },
    deletes(){
      this.$bus.$emit("delete", this.TodoData.id);
      this.$bus.$emit("hideWindow");
    },
    edits(){
      this.$bus.$emit("edit", this.TodoData);
      this.$bus.$emit("hideWindow");
    }
  },
  mounted() {
    this.$bus.$on("setWindow", this.setWindow);
    pubsub.subscribe("copyTitle", () => {});
  },
  props: ["todos"],
};
</script>

<style lang="scss">
.float_window {
  position: absolute;
  width: 100px;
  height: 202px;
  background-color: #fff;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
  transition: 0.3s;
  z-index: 100;
  // display: none;
  overflow: hidden;
  // padding: 0px 10px;
  ul {
    list-style: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    li {
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #eee;
      cursor: pointer;
      transition: 0.3s;
      width: 100%;
      position: relative;
      &:hover {
        background-color: #eee;
      }
    }
  }
}
</style>